<template>
  <div class="image-man pad">
    <div class="head">
      <span>图片管理</span>
    </div>
    <div class="search m-t-b">
      <el-input clearable placeholder="注册用户编号" v-model="search.text" @input="cancelSearch">
        <!-- <el-select slot="prepend" style="width: 120px;" v-model="search.type">
          <el-option label="编号" value="id"></el-option>
          <el-option label="关系名称" value="name"></el-option>
        </el-select> -->
      </el-input>
      <el-button @click="handleSearch" type="primary">
        <i class="el-icon-search"></i> 搜索
      </el-button>
    </div>
    <el-table class="m-t-b" border stripe :data="images" v-loading="loading">
      <el-table-column label="注册用户编号" prop="userId"></el-table-column>
      <el-table-column label="关联关系昵称" prop="nickname"></el-table-column>
      <el-table-column label="已上传图片数" prop="picNum"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="lookImg(scope.row)" icon="el-icon-view" circle></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="flex m-t-b"
      :page-size="pageSize"
      layout="prev, pager, next"
      @current-change="handlePagi"
      :total="total">
    </el-pagination>
    <el-dialog title="图片详情" :visible.sync="showDialog" :before-close="handleClose">
      <el-table :data="imgs" v-loading="dialogLoading">
        <el-table-column label="图片标签">
          <template slot-scope="scope">
            {{scope.row.name ? scope.row.name : '无'}}
          </template>
        </el-table-column>
        <el-table-column label="图片描述">
          <template slot-scope="scope">
            {{scope.row.picDescription ? scope.row.picDescription : '无'}}
          </template>
        </el-table-column>
        <el-table-column label="图片">
          <template slot-scope="scope">
            <el-image style="width: 50%;" :src="scope.row.pic" :preview-src-list="srcList">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column label="上传时间" prop="createDate"></el-table-column>
      </el-table>
      <el-pagination
      class="flex m-t-b"
        :page-size="pageSize"
        layout="prev, pager, next"
        @current-change="handlePagiMore"
        :total="dialogTotal">
      </el-pagination>
    </el-dialog>
  </div>
</template>
<script>
import {
  ImgStatistics,
  findImgByRemember
} from '../api';
import { formatDate } from '../util';

export default {
  name: 'image-man',
  data () {
    return {
      showDialog: false,
      pageSize: 10,
      total: 0,
      loading: true,
      memberId: '',
      dialogLoading: true,
      dialogTotal: 0,
      search: {
        text: '',
        type: 'id'
      },
      images: [],
      srcList: Array(5).fill(require('../assets/images/ct.png')),
      imgs: []
    }
  },
  methods: {
    lookImg (img) {
      if (!this.$checkAuth('canSeeMemberImage')) {
        return this.$message.error('暂无对应操作权限!')
      };
      this.memberId = img.memberId;
      this.fetchOneImg(1, img.memberId)
      this.showDialog = true
    },
    handleClose () {
      this.imgs = [];
      this.srcList = [];
      this.showDialog = false
    },
    handlePagi (page) {
      if (this.search.text.trim()) {
        this.fetchAllImgs(page, this.search.text)
      } else {
        this.fetchAllImgs(page)
      }
    },
    handlePagiMore (page) {
      this.fetchOneImg(page, this.memberId)
    },
    handleSearch () {
      if (!this.$checkAuth('canSearchImage')) {
        return this.$message.error('暂无对应操作权限!')
      };
      if (!this.search.text.trim()) {
        this.search.text = ''
        return this.$message.error('请输入搜索内容!')
      }
      this.fetchAllImgs(1, this.search.text)
    },
    cancelSearch () {
      if (!this.search.text) {
        this.fetchAllImgs(1)
      }
    },
    fetchOneImg (index, id) {
      this.dialogLoading = true;
      findImgByRemember({
        index: index,
        count: this.pageSize,
        queryParam: {
          memberId: id//成员id
        }
      })
      .then(res => {
        this.dialogLoading = false;
        if (res.data.code === 1) {
          let list = res.data.data.list || [];
          this.dialogTotal = res.data.data.totalRecord;
          let len = list.length;
          let arr = [];
          for (let i = 0; i < len; i ++) {
            list[i].createDate = formatDate(list[i].createDate);
            arr.push(list[i].pic)
          };
          this.srcList = arr;
          this.imgs = list
        } else {
          this.$message.error(res.data.msg || '网络异常!')
        }
      })
      .catch(e => {
        this.dialogLoading = false;
        this.$message.error('网络异常!')
      })
    },
    fetchAllImgs (index, id) {
      this.loading = true;
      id = id || null;
      ImgStatistics({
        index: index,
        count: this.pageSize,
        queryParam: {
          userId: id //微信用户标识
        }
      })
      .then(res => {
        this.loading = false;
        if (res.data.code === 1) {
          this.images = res.data.data.list || [];
          this.total = res.data.data.totalRecord
        } else {
          this.$message.error(res.data.msg || '网络异常!')
        }
      })
      .catch(e => {
        this.loading = false;
        this.$message.error('网络异常!')
      })
    }
  },
  created () {
    this.fetchAllImgs(1)
  }
}
</script>
<style lang="scss">
  .image-man {
    .search {
      display: flex;
    }
    table {
      .cell {
        text-align: center;
      }
    }
  }
</style>
